@import "@automattic/typography/styles/fonts";
@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";
@import "@automattic/color-studio/dist/color-variables";
@import "@wordpress/base-styles/variables";
@import "../../assets/stylesheets/shared/mixins/breakpoints";

$breakpoint-mobile: 782px; //Mobile size.

.layout:not(.is-wccom-oauth-flow):not(.is-woocommerce-core-profiler-flow) {
	.login.is-jetpack:not(.is-automattic-for-agencies-flow) {
		.button.is-primary {
			background-color: var(--studio-jetpack-green-50);
			border-color: var(--studio-jetpack-green-50);

			&:hover,
			&:focus {
				background-color: var(--studio-jetpack-green-60);
			}

			.accessible-focus &:focus {
				box-shadow: 0 0 0 2px var(--studio-jetpack-green-30);
			}
		}
	}
}

.is-automattic-for-agencies-flow {
	// Override accent variables with A4A colors
	--color-accent: #{$studio-automattic-blue};
	--color-accent-light: #{$studio-automattic-blue-20};
	--color-accent-dark: #{$studio-automattic-blue-50};
	--color-accent-60: #{$studio-automattic-blue-40};

	// Override global colors with accent variables
	--color-primary: #{$studio-automattic-blue};
	--color-primary-light: #{$studio-automattic-blue-40};
	--color-primary-dark: #{$studio-automattic-blue-50};

	::selection {
		color: var(--color-text-inverted);
		background: var(--color-accent);
	}
}

.layout.is-wccom-oauth-flow {
	.layout__content {
		padding-top: 48px;
	}

	.masterbar {
		display: none;
	}

	.login__woocommerce-logo {
		text-align: center;
		border-bottom: 1px solid var(--color-neutral-5);
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 56px;

		svg > g {
			transform: translateX(25%);
		}
	}

	.login__woocommerce-wrapper {
		svg > g {
			transform: translateX(50%);
		}
	}

	.jetpack-header,
	.login__woocommerce-logo {
		margin: 0;
		text-align: center;
		margin-right: auto;
		margin-left: auto;
		padding-left: 0;
		display: block;
		height: 56px;
		border-bottom: 1px solid var(--color-woocommerce-header-border);
		background: #fff;

		svg {
			margin-top: 15px;
		}
	}

	.jetpack-logo__icon-circle {
		fill: var(--color-neutral-80);
	}

	.jetpack-logo__icon-triangle {
		fill: var(--color-neutral-0);
	}

	.login__form-action .form-button {
		border: 0;
		box-shadow: none;
	}

	.login__social-tos {
		margin: 1.5em auto;
		max-width: 330px;

		a {
			color: var(--color-accent);
			text-decoration: underline;
		}
	}

	.jetpack-header__partner-logo-plus svg {
		stroke: var(--color-neutral-80);
	}

	.jetpack-header__partner-logo-plus .gridicon {
		color: var(--color-neutral-80);
	}
}

.card.login__form {
	margin-bottom: 0;
}

.wp-login__main .login .is-social-first .card.login__form > .social-buttons__button.button {
	background: var(--studio-wordpress-blue, #3858e9);
	border: none;

	& > svg:not(.social-icons__mail):not(.jetpack-logo) path {
		fill: #fff;
	}

	& > svg.social-icons__mail {
		path,
		rect {
			stroke: #fff;
		}
	}

	& > svg.jetpack-logo {
		polygon {
			fill: var(--studio-wordpress-blue, #3858e9);
		}

		path {
			fill: #fff;
		}
	}

	& > span {
		color: #fff;
	}
}

.login__form .login__form-userdata {
	input.form-text-input,
	input {
		margin-bottom: 20px;
		transition: none;
		text-align: left;
		/*!rtl:ignore*/
		direction: ltr;

		&.is-error {
			margin-bottom: 0;
		}
	}

	.login__form-suggested-email {
		color: var(--color-link);
		cursor: pointer;
		text-decoration: none;

		&:hover {
			color: var(--color-link-dark);
		}
	}

}

// Ensure inline support links beside the form inputs inherit the subheader styling
// without needing bespoke classes on the JSX.
.login__form-userdata .components-external-link {
	color: var(--studio-gray-50, #646970);
	font-weight: 400;
	font-size: $font-body-small;
	text-align: center;
	display: block;

	&:visited,
	&:hover,
	&:focus {
		color: var(--studio-gray-50, #646970);
	}
}

.login__form-change-username {
	font-weight: inherit;

	.gridicon {
		margin-right: 3px;
		vertical-align: text-bottom;
	}
}

.login__form .form-input-validation {
	margin-bottom: 5px;
}

.login__form-action {
	button {
		width: 100%;
	}
}

.grav-powered-login__form-header-wrapper {
	text-align: center;

	.gridicon {
		color: var(--color-primary);
	}

	.visit-site {
		margin: 12px 0 24px;
		text-align: left;

		@include break-mobile {
			text-align: center;
		}
	}

	&.is-jetpack-login {
		padding: 0 16px;

		@include break-mobile {
			padding: 0;
		}
	}
}

.grav-powered-login__form-header {
	font-size: $font-title-small;
	margin-bottom: 24px;
	margin-top: 16px;
	text-align: center;

	body.is-section-signup & {
		color: var(--color-text-inverted);
	}
}

.login__form-terms {
	font-size: $font-body-extra-small;
	text-align: center;

	a {
		white-space: pre;
	}
}

.login__form-password {

	&.is-hidden {
		// hide the password field in a way that still makes it "visible" for password managers.
		// 1Password doesn't fill the field if it has display:none or visibility:hidden.
		position: fixed;
		bottom: 0;
		height: 0;
		width: 0;
		overflow: hidden;
		opacity: 0;
	}

	.form-input-validation {
		padding-right: 0;
	}
}

.login__jetpack-pre-header {
	margin-top: 0;
	margin-bottom: 16px;

	@include heading-2x-large;

	text-align: initial;
}

.login__jetpack-header {
	@include body-large;
	text-align: initial;
}

.login__form-gutenboarding-wordpress-logo {
	height: 64px;
	position: absolute;
	left: 0;
	top: 0;
	padding: 0 20px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;

	@include break-mobile {
		padding: 8px 24px;
	}
}

.login__jetpack-plus-wpcom-logo {
	margin: 40px 0 16px;
}

.login__form-social-divider {
	text-align: center;
	margin-top: 12px;
	margin-bottom: 12px;
	font-size: $font-body-extra-small;
	position: initial;
	text-transform: initial;
}

.layout:not(.is-grav-powered-client) {
	&.is-mobile {
		.login__lostpassword-form  {
			padding: 16px 16px 0;
		}
	}
}
